<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>
      h1 {
        color: red;
      }
      h2,
      .sure {
        margin: 5px 0;
      }
      .inline {
        display: inline-block;
      }
      .solution i {
        color: orange;
      }
    </style>
  </head>
  <body>
    <form
      class="layui-form"
      action=""
      style="display: flex; justify-content: space-between"
    >
      <div>
        <div class="box"></div>
        <div class="sure layui-btn">确定</div>
      </div>
      <div class="solution">
        <h1>这是答案</h1>
      </div>
    </form>
    <script>
      layui.use(['form', 'layedit', 'laydate'], function () {
        //实例化element
        var form = layui.form
        // 后台返回的数据
        var list = [
          {
            answer: 'A',
            content: '标题0',
            type: '0',
          },
          {
            answer: 'B',
            content: '标题1',
            type: '0',
          },
          {
            answer: 'A,B',
            content: '标题2',
            type: '1',
          },
          {
            answer: 'D',
            content: '标题3',
            type: '1',
          },
          {
            answer: 'D',
            content: '标题4',
            type: '1',
          },
          {
            answer: '我是一道大题的答案',
            content: '标题5',
            type: '2',
          },
          {
            answer: '我是一道大题的答案2222',
            content: '标题6',
            type: '2',
          },
        ]
        const zimu = ['A', 'B', 'C', 'D']
        list.forEach((item, index) => {
          const itemAnswer = [...item.answer.replace(/,/, '')]
          var zifuchuan = `<div>
        <h2>${item.content}</h2>`
          for (let i = 0; i < zimu.length; i++) {
            let taoZimu = zimu[i]
            // 单选题
            if (item.type === '0') {
              zifuchuan += `<div class="inline inline2 dan">
                   <input type="radio" name="${index}" value="${taoZimu}" title="${taoZimu}" ${
                itemAnswer.includes(taoZimu) ? 'checked' : ''
              } />
                  </div>`
            } else if (item.type === '1') {
              // 多选题
              zifuchuan += `<div class="inline inline2 shuang">
                     <input type="checkbox" name="${taoZimu}" value="${taoZimu}" lay-skin="primary" title="${taoZimu}" ${
                itemAnswer.includes(taoZimu) ? 'checked' : ''
              } />
               </div>`
            }
          }
          if (item.type === '2') {
            // 填空题
            zifuchuan += `<div class=" inline" data-name ="${item.type}">
                          <textarea placeholder="请输入内容" class="layui-textarea">${item.answer}</textarea>
                          </div>`
          }
          ;`</div>`
          // 动态渲染
          $('.box').append(zifuchuan)
          form.render('checkbox')
          form.render('radio')
        })
        // 获取数据
        $('.sure').click(function () {
          $('.solution').find('div').html('')
          var formData = [] //总数据
          var ckAarray //input数据
          var ckAarray2 //textarea数据
          var num = 0 //判断是否未选择
          $('.box>div').each(function () {
            ckAarray = $(this).find('.inline2').find('input:checked')
            ckAarray2 = $(this).find('.inline').find('textarea')
            var ans = ''
            // 单选题
            ckAarray.each(function (i, item) {
              ans += ckAarray.length == i + 1 ? item.value : item.value + ','
            })
            // 填空题
            ckAarray2.each(function (i, item) {
              ans += item.value
            })
            // 赋值到对象
            forDan = {
              answer: ans,
              content: $(this).find('h2').html(),
            }
            formData.push(forDan)
          })
          //   判断多少题  没有做
          formData.map((item) => {
            if (item.answer.length == 0) {
              num++
            }
          })
          if (num != 0) {
            alert(
              '总共' +
                formData.length +
                '道题! 已做答:' +
                (formData.length - num) +
                '道题,还有' +
                num +
                '道题未完成'
            )
          } else {
            console.log(formData)
            alert('恭喜你,答题完成')
            formData.forEach((item, index) => {
              var soluData = `<div><i>${index + 1}、</i> ${item.answer}</div>`
              $('.solution').append(soluData)
            })
          }
        })

        // 动态添加单选还是多选
        var typeNum = null
        var typeNum2 = null
        list.forEach(function (item) {
          if (item.type === '0') {
            typeNum++
          } else if (item.type === '1') {
            typeNum2++
          }
        })
        // 单选题
        $('.box>div').eq(0).prepend('<h1>单选题</h1>')
        // 多选题
        $('.box>div')
          .eq(typeNum2 - 1)
          .prepend('<h1>多选题</h1>')
        // 填空题
        $('.box>div')
          .eq(typeNum + typeNum2)
          .prepend('<h1>填空题</h1>')
      })
    </script>
  </body>
</html>
